<template>
  <div class="box">
        <button @click="add">+</button>
        <input type="text" v-model="count" id="counter">
        <button @click="minus" :disabled="!count">-</button>
 </div>
  </template>
  <script>

  export default {
    name: 'count',
 computed:{
    count:function(){ return  this.$store.state.count },
  },
  methods:{
   add(){
     this.$store.commit("add")
   },
   minus(){
    this.$store.commit("minus");
   }
  }
  }
  </script>
  <style scoped>
    #counter{
      width:20px;
      color:#666;
      border-radius: 5px;
      text-align:center;
    }
    #box{margin:5px;}
  </style>
